最近使用七牛云上传，走了不少弯路，铭记前车之鉴，后车之源，站在巨人的肩膀上，您看的更远。请瞪大你的双眼，solo一下
往这里瞧 这里看
第一步
阅读: 七牛API
参考：前任
先有理论，在实践（熟话说：台下十年功，台上一分钟），经过您的九九八十一难，你才能修炼成佛。
第二步
通过你的不屑努力，你终于有了登台表演的机会了
html1
2
3
4
5<wb-up-load-video ng-show="saveCourseModule.courseUrl == null" vide-load-video-error="upLoadVideoError(info)"
up-loaded-video="upLoadVideoSuccess(info,packageInItem)"
up-load-video-progress="upLoadVideoProgress(info)" browse-button-video="pickVides">
<button class="btn btn-default height30 " >选择文件</button>
</wb-up-load-video>
组件封装1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127define('framework/uploaderQiNiu/uploaderQiNiuVideoModule', ['angular'], function (angular) {
return angular.module('uploaderQiNiuVideoModule', [])
.directive('wbUpLoadVideo', function wbUpLoad($timeout, Resource, GillionMsg) {
return {
restrict: 'AE',
template: '<div id="container" style="display:inline-block;" ng-click="onClickGetToken()">\n' +
'<a class="pickVides" id="pickVides" style="display:inline-block;vertical-align:text-bottom">\n' +
'<div ng-transclude style="display:inline-block;">\n' +
'</div>\n' +
'</a>\n' +
'</div>',
transclude: true,
scope: {
upLoadVideoError: "&",
upLoadVideoProgress: "&",
upLoadedVideo: "&"
},
link: function (scope, elem, attrs) {
var tokenSource = Resource(basePath + '/picture/loadToken');
var loadToken = "";
var domain = "";
tokenSource.get(function (result) {
loadToken = result.data.uploadToken;
domain = result.data.qNiuUrl;
$timeout(function () {
if (!attrs.browseButtonVideo) {
attrs.browseButtonVideo = 'pickVides';//如果没有attrs.browseButton,id为pickVides
}
var pickVides = $('[browse-button-video=' + attrs.browseButtonVideo + ']').find('.pickVides');
pickVides.attr('id', attrs.browseButtonVideo);//设置id为html传入的browseButton值
var context = scope;
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: attrs.browseButtonVideo,
container: 'container',
drop_element: 'container',
flash_swf_url: '../../../bower_components/plupload-2.3.6/js/Moxie.swf',
dragdrop: true,
chunk_size: '4mb',
uptoken: loadToken, // uptoken是上传凭证，由其他程序生成
// uptoken_url: '/business/picture/loadToken',
multi_selection: false,
//限制上传视频格式
filters: {
max_file_size: '400mb',
prevent_duplicates: true,
mime_types: [
{
title: "Video files",
// extensions: "flv,mp4,wmv",
extensions: "mp4",
meTypes: "video/*"
} //限定flv,mp4后缀格式上传
]
},
domain: domain,
get_new_uptoken: false,
// downtoken_url: '/downtoken',
unique_names: false,
// save_key: true,
x_vars: {
'time': function (up, file) {
var time = (new Date()).getTime();
// do something with 'time'
return time;
}
},
auto_start: true,
log_level: 5,
init: {
'FilesAdded': function (up, files) {
plupload.each(files, function(file) {
var progress = new FileProgress(file,
'fsUploadProgress');
progress.setStatus("等待...");
progress.bindUploadCancel(up);
});
},
'BeforeUpload': function (up, file) {
var file_ext = file.name.substr(file.name.lastIndexOf("."));
uploader.settings.multipart_params.key = parseInt(new Date().valueOf()) + file_ext;
console.log("this is a beforeupload function from init");
var progress = new FileProgress(file, 'fsUploadProgress');
var chunk_size = plupload.parseSize(this.getOption(
'chunk_size'));
if (up.runtime === 'html5' && chunk_size) {
progress.setChunkProgess(chunk_size);
}
},
'UploadProgress': function (up, file) {
context.upLoadVideoProgress({info: file});
var progress = new FileProgress(file, 'fsUploadProgress');
var chunk_size = plupload.parseSize(this.getOption(
'chunk_size'));
progress.setProgress(file.percent + "%", file.speed,
chunk_size);
},
'UploadComplete': function () {
},
'FileUploaded': function (up, file, info) {
context.upLoadedVideo({
info: {info: info, file: file}
});
},
'Error': function (up, err, errTip) {
context.upLoadVideoError({info: err});
},
'Key': function(up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在unique_names: false，save_key: false时才生效
var key = "";
// do something with key here
return key
}
}
});
});
})
}
}
})
});
js代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22$scope.upLoadVideoSuccess = upLoadVideoSuccess;
function upLoadVideoSuccess(upLoadInfo, item) {
$scope.$apply(function () {
//图片上传成功
$scope.saveCourseModule.courseUrl = url + JSON.parse(upLoadInfo.info).key;
$scope.saveCourseModule.courseIcon = url + JSON.parse(upLoadInfo.info).key + "?vframe/jpg/offset/5";
});
//获取视频时长
var myVid = document.getElementById("videoTime");
myVid.oncanplay = function () {
var lineTime = myVid.duration;
$scope.saveCourseModule.courseLen = lineTime;
// console.log(myVid.duration);
}
}
//视频加载
$scope.videoUrlFun = function (url) {
var urlFun = $sce.trustAsResourceUrl(url);
return urlFun;
};
